<template>
    <div>
        <span class="my-icon" v-for="icon in icons" :key="icon">
            <svg-icon :iconClass="icon"/>
        </span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            icons: null
        }
    },
    created() {
        const req = require.context('@/icons/svg', false, /\.svg$/)
        const requireAll = requireContext => requireContext.keys()
        const re = /\.\/(.*)\.svg/

        this.icons = requireAll(req).map(i => {
            return i.match(re)[1]
        })
    }
}
</script>

<style scoped>
.my-icon {
    color: #42b983;
    cursor: pointer;
    float: left;
    font-size: 30px;
    height: 90px;
    margin: 20px;
    text-align: center;
    width: 90px;
}
</style>
